<template>
    <div class="loan-detail">
        <div class="loan-detail-wrapper wrapper">
            <div class="loan-detail-box">
                <div class="loan-detail-header" v-if='info.user'>
                    <div class="loan-detail-user" @click='goContactDetail(info.user.uuid)'>
                        <span class="loan-detail-user__avatar"><img :src="info.user.avatar || placeholderImg" alt=""></span>
                        <div class="loan-detail-user__info">
                            <p class='name'>{{info.user.realName}}</p>
                        </div>
                        <div class='count'>
                            <div class="count__item money">
                                <span class="key">借入总额(元)</span>
                                <span class="value">{{info.sumBorrowAmount | toYuan}}</span>
                            </div>
                            <div class="count__item times">
                                <span class="key">| 次数</span>
                                <span class="value">| {{info.countBorrowTime}}次</span>
                            </div>
                            <div class="count__item peoples">
                                <span class="key">| 人数</span>
                                <span class="value">| {{info.countLendUserId}}人</span>
                            </div>
                        </div>
                    </div>
                    <div class="header-block">
                        <div class="header-item iou">
                            <div class='header-item__value'>
                                <span class="header-item__money">{{info.borrowReceiptAmount | toYuan}}</span>
                                <span class="header-item__number">| {{info.borrowReceiptTime}}次</span>
                            </div>
                            <div class='header-item__key'>
                                <span class="header-item__money">补借条总额</span>
                                <span class="header-item__number">| 次数</span>
                            </div>
                        </div>
                        <div class="header-item-box">
                            <div class="header-item">
                                <div class='header-item__value'>
                                    <span class="header-item__money">{{info.waitRepayAmount | toYuan}}</span>
                                </div>
                                <div class='header-item__key'>
                                    <span class="header-item__money">待还总额(元)</span>
                                </div>
                            </div>
                            <div class="header-item padding-left">
                                <div class='header-item__value'>
                                    <span class="header-item__money orange">{{info.borrowRecentNowWaiteRepayAmount | toYuan}}</span>
                                </div>
                                <div class='header-item__key'>
                                    <span class="header-item__money">今日待还</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="header-block">
                        <div class="header-item">
                            <div class='header-item__value'>
                                <span class="header-item__money">{{info.overdueAmount | toYuan}}</span>
                                <span class="header-item__number">| {{info.overdueTime}}次</span>
                            </div>
                            <div class='header-item__key'>
                                <span class="header-item__money">逾期总额</span>
                                <span class="header-item__number">| 次数</span>
                            </div>
                        </div>
                        <div class="header-item-box">
                            <div class="header-item">
                                <div class="header-item__title">其中</div>
                            </div>
                            <div class="header-item padding-left">
                                <div class='header-item__value'>
                                    <span class="header-item__money">{{info.overdueRecent7DayAmount | toYuan}}</span>
                                    <span class="header-item__number">| {{info.overdueRecent7DayTime}}次</span>
                                </div>
                                <div class='header-item__key'>
                                    <span class="header-item__money">大于7天逾期金额 | 次数</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="header-block">
                        <div class="header-item-box">
                            <div class="header-item">
                                <div class='header-item__value'>
                                    <span class="header-item__money">{{info.overdueNowAmount | toYuan}}</span>
                                    <span class="header-item__number">| {{info.overdueNowTime}}次</span>
                                </div>
                                <div class='header-item__key'>
                                    <span class="header-item__money">当前逾期 | 次数</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main">
                    <h1 class="big-title" >借入款列表</h1>
                </div>


                <loading-more
                    v-model='loading'
                    wrapper-box='.loan-detail-box'
                    wrapper='.loan-detail-wrapper'
                    url='contact/borrowSuccessList'
                    :params='successListObject'
                    @finish='setRecords'
                    @complete='complete = true'>
                    <div class="user-table" v-if='records.length'>
                        <div class="user-table__item head">
                            <span class="user-table__value">借款金额</span>
                            <span class="user-table__value">借款时间</span>
                            <span class="user-table__value">还款时间</span>
                            <span class="user-table__value">状态</span>
                        </div>
                        <ul>
                            <li class="user-table__item" v-for='item in records' @click='goIOU(item.borrowNo)'>
                                <span class="user-table__value">
                                    <img :src="item.user.avatar">
                                    <span>{{item.borrowAmount | toYuan}}</span>
                                </span>
                                <span class="user-table__value">{{item.borrowAt | dateFormat}}</span>
                                <span class="user-table__value">{{item.lastShouldRepayTime | dateFormat}}</span>
                                <span class="user-table__value">{{item.repayStateStr}}</span>
                            </li>
                        </ul>
                        <loading v-show='loading' :size='15'></loading>
                        <p class='user-list-explain' v-if='complete'>以上为全部借入资金记录</p>
                    </div>
                </loading-more>
                <p class="page-placeholder" v-if='!records.length'><span>暂无借入资金记录</span></p>
            </div>
        </div>

        <footer class="single-button">
            <span class="button" @click='goReportDetail'>更多信用资料</span>
        </footer>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import loading from '../components/Loading.vue'
    import loadingMore from '../components/LoadingMore.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { allApi, userApi, contactApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            loading,
            loadingMore
        },
        filters:{
            toYuan,
            dateFormat
        },
        data() {
            return {
                placeholder:'--',
                records:[],
                info:{},
                successListObject:{
                    uuid:this.$route.params.id
                },
                complete:false,
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            goReportDetail(){
                if(!this.info.creditReport){
                    this.setMsgTip({
                        text:'该用户暂无信用报告！',
                        type:'warn'
                    })
                    return
                }
                this.$router.push({
                    name:'user-credit-report-detail',
                    params:{
                        no:this.info.creditReport.creditReportNo
                    }
                })
                this.$ga.event({
                  eventCategory: 'DebtCrp_v',
                  eventAction: 'click',
                  eventLabel: '负债详情中信用资料点击次数'
                })
                allApi.onEvent({
                    eventType:'track_click',
                    eventName:'DebtCrp_v',
                    eventDescr:'负债详情中信用资料点击次数',
                    eventValue:JSON.stringify({
                        reportId:this.info.creditReport.creditReportNo,
                        uuid:this.$route.params.id
                    }),
                })
            },
            getInfo(){
                this.showLoading()
                contactApi.borrowDetail({
                    uuid:this.$route.params.id
                })
                .then(result=>{
                    this.hideLoading()
                    this.info = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goIOU(no){
                this.$router.push({
                    name:'loan-IOU',
                    params:{
                        number:no
                    }
                })
            },
            setRecords(records){
                console.log(records)
                this.records = records
            },
        },
        created(){
            this.getInfo()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-detail{
        .wrapper{
            padding-bottom: 100px;
        }
        .user-table__value{
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                display: block;
                border-radius:50%;
                width: 24px;
                height: 24px;
                border:1px solid $sectionColor;
            }
            span{
                display: block;
                padding-left: 8px;
            }
        }
        .header-block{
            display: flex;
            padding:9px 0;
        }
        .header-item-box{
            flex:1;
            display: flex;
            justify-content: flex-end;
            text-align: right;
        }
        .header-item{
            &.iou{
                position: relative;
                padding-right: 21px;
                &:after{
                    content:'';
                    position: absolute;
                    top:50%;
                    right:0;
                    height: 32px;
                    border-right: 1px solid $sectionColor;
                    margin-top: -16px;

                }
            }
            &.padding-left{
                padding-left: 25px;
            }
        }
        .header-item__value{
            @extend %font-subhead;
            color:$importColor;
            .header-item__number{
                @extend %font-body1;
            }
        }
        .header-item__key{
            @extend %font-caption;
        }
        .header-item__title{
            @extend %font-caption;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius:50%;
            background-color: $backgroundColor;
        }
        .count{
            display: flex;
            text-align:right;
        }
        .count__item{
            &:last-child{
            }
            .key{
                @extend %font-caption;
                display: block;
            }
            .value{
                display: block;
                padding:11px 0 0 8px;
                @extend %font-body1;
                color:$importColor;
            }
            &.money{
                .value{
                    color:$orange;
                    @extend %font-title;
                    line-height: 23px;
                }
            }
        }
        .header{
            background-color: #fff;
            padding:24px 0 17px 0;
            text-align: center;
        }
        .header-money{
            p{
                @extend %font-headline;
                font-size: 34px;
                color:$orange;
            }
            span{
                @extend %font-caption;
            }
        }
        .header-data{
            display: flex;
            padding-top: 9px;
        }
        .header-data__item{
            width: 20%;
            flex:1;
            text-align: center;
            p{
                @extend %font-subhead;
            }
            span{
                @extend %font-caption;
            }
        }
    }

</style>
